<template>
    <div style="display: flex;flex-direction: row;flex-wrap: wrap;position: relative;min-height: 20px;"
      :style="{
        'background': nodeModel.background,
        'marginTop': nodeModel.marginTop/2+'px',
        'marginBottom': nodeModel.marginBottom/2+'px',
        'marginLeft': nodeModel.marginLeft/2+'px',
        'marginRight': nodeModel.marginLeft/2+'px',
        'paddingTop': nodeModel.paddingTop/2+'px',
        'paddingBottom': nodeModel.paddingBottom/2+'px',
        'paddingLeft': nodeModel.paddingLeft/2+'px',
      }">
      <div style="padding: 10px;">
        <div v-if="itemDetail.intro" style="color:#000000;font-size: 20px;font-weight: bold;">商品描述</div>
		    <div v-if="itemDetail.intro" style="color: #666;font-size: 14px;margin-top: 6px;">{{itemDetail.intro}}</div>
      </div>
      <div style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 375px;">
        <div style="width: 60px;height: 1px;background-color: #999999;"></div>
        <div style="margin: 0 16px;">商品详情</div>
        <div style="width: 60px;height: 1px;background-color: #999999;"></div>
      </div>
      <div style="width: 100%;margin-top: 20px;display: flex;flex-direction: column;align-items: center;" v-if="!itemDetail.detailPhotosRichText">
        <el-image fit="cover" :src="item.coverUrl" v-for="(item, index) in itemDetail.detailPhotoList" :key='index'
        style="flex-shrink: 0;"
        :style="{
          'width': nodeModel.widthForCover1/2 + 'px', 
          'borderRadius': nodeModel.borderRadiusForCover1/2 + 'px',
          'margin-bottom': nodeModel.marginTopForImageText1/2 + 'px',
        }"></el-image>
      </div>
      <div v-if="itemDetail.detailPhotosRichText" :style="{
        'width': nodeModel.widthForCover1/2 + 'px'
      }"><Editor v-model="itemDetail.detailPhotosRichText" :height="500" /></div>
      <!-- 底部操作区 -->
      <div style="position: absolute;bottom: 0px;width: 100%;height: 70px;background: #FFFFFF;display: flex;flex-direction: row;align-items: center;justify-content:space-between;">
        <!-- 按钮 -->
        <div>
          <div v-if="nodeModel.isShowForBtn2" style="display: flex;flex-direction: column;align-items: center;margin-right: 20px;margin-left: 20px;">
            <i class="el-icon-service"></i>
            <div style="color: #666;font-size: 14px;">客服</div>
          </div>
        </div>
        <!-- 支付按钮 -->
        <div style="width: 140px;height: 50px;margin-right: 20px;background-color: #234fc2;color: #FFFFFF;line-height: 50px;text-align: center;border-radius: 25px;"
        :style="{
          'width': nodeModel.widthForBtn1/2 + 'px',
          'height': nodeModel.heightForBtn1/2 + 'px',
          'line-height': nodeModel.heightForBtn1/2 + 'px',
          'color': nodeModel.colorForBtn1,
          'background': nodeModel.backgroundColorForBtn1,
          'border-radius': nodeModel.borderRadiusForBtn1/2 + 'px',
          'font-size': nodeModel.fontsizeForBtn1/2 + 'px',
          'font-weight': nodeModel.fontweightForBtn1,
          'margin-right': nodeModel.marginRightForBtn1/2 + 'px'
        }">{{nodeModel.titleForBtn1}}</div>
      </div>
    </div>
</template>
<script>
  import Editor from '@/components/Editor';
  export default {
    components: {
      Editor
    },
    props:{
      nodeModel:{
            type: Object,
            default: res=>{}
        },
        itemDetail: {
          type: Object,
          default: {}
        }
    },
    data() {
      return {
        
      }
    },
    methods:{
        
    }
  }
</script>

<style lang="scss" scoped>

</style>